<template>
  <div class="page">
    <div class="head">
      <h1>迁移小猴</h1>
    </div>
    <div class="panel">
      <div class="transfer">
        <span v-if="dict.length > 0">持有神仙草：{{ dict[7].num }} 张</span>
      </div>
      <div class="transfer-rules">
        <p>使用神仙草即可将玩客猴创世服及国际服中相同手机号下拥有的小猴迁移至本服。</p>
        <p v-if="dict.length > 0">6代消耗{{ dict[6].num }}张；5代消耗{{ dict[5].num }}张；4代消耗{{ dict[4].num }}张；3代消耗{{ dict[3].num }}张；2代消耗{{ dict[2].num }}张；1代消耗{{ dict[1].num }}张；0代消耗{{ dict[0].num }}张。</p>
        <p>迁移后小猴
          <span>体重与属性重置，生育次数保留，</span>操作不可逆！</p>
      </div>
    </div>
    <sticky>
      <div class="filter">
        <ul class="status">
          <li v-for="(item, index) in category" :class="{'active': item.value == serverNo }" @click="changeCategory(item.value)" :key="index">{{item.name}}</li>
        </ul>
        <ul class="order">
          <li :class="{'active': item.value == orderBy,'up': genAsc}" @click="changeOrder(item.value)" v-for="(item, index) in order" :key="index">{{$t(item.name)}}</li>
        </ul>
      </div>
    </sticky>

    <div class="monkeys">
      <div class="panel" v-for="(item,index) in homeList" :key="index">
        <div class="list-item" @click="transferMonkey(item.id,item.generation)">
          <div class="img">
            <img :src="item.facade" :style="{background: item.background}" alt="">
            <div class="id"># {{ item.id }}</div>
          </div>
          <ul class="minfo">
            <li>{{ item.generation }} {{ $t('代') }} · {{ item.weight }} kg</li>
            <li>长:{{ item.grow | toFix(2) }} / 育:{{ item.bear | toFix(2) }} / 力:{{ item.makeMoney | toFix(2) }}</li>
            <li>
              <span>{{item.bearNum}}次生育/{{ $t('下次生育') }}:</span>
              <count-down :startTime="new Date().getTime()" :endTime="item.nextBearDate" endText="准备就绪"></count-down>
            </li>
          </ul>
        </div>
      </div>
      <infinite-loading @infinite="initData" ref="infiniteLoading">
        <span slot="no-more"></span>
        <div slot="no-results">
          <br>
          <empty></empty>
        </div>
        <!-- <div slot="no-results" v-else></div> -->
        <spinner slot="spinner" type="lines"></spinner>
      </infinite-loading>
    </div>
  </div>
</template>

<script>
import { Sticky, Spinner } from "vux";
import InfiniteLoading from "vue-infinite-loading";
import empty from "./common/empty.vue";
import CountDown from "./common/vue2-countdown.vue";
export default {
  components: {
    Sticky,
    InfiniteLoading,
    Spinner,
    empty,
    CountDown
  },
  data() {
    return {
      category: [{ name: "创世服", value: 1 }, { name: "国际服", value: 2 }],
      serverNo: 1,
      orderBy: 1,
      sort: 0,
      current: 1,
      genAsc: true,
      dict: [],
      order: [
        {
          name: "代数",
          value: "1"
        }
      ],
      homeList: []
    };
  },
  computed: {},
  mounted() {
    this.$nextTick(function() {
      this.getDict();
    });
  },
  methods: {
    initData($state) {
      this.$http
        .post(`/game/v3/pullMyMonkeyPage`, {
          serverId: this.serverNo,
          genAsc: this.genAsc,
          current: this.current
        })
        .then(res => {
          if (res.code == 200) {
            if (res.result.total > 0) {
              if (this.current == 1) {
                this.homeList = [];
              }
              this.homeList = this.homeList.concat(res.result.records);
              $state.loaded();
              if (res.result.current < res.result.pages) {
                this.current += 1;
              } else {
                $state.complete();
              }
            } else {
              $state.complete();
            }
          } else {
            this.$vux.toast.text(res.msg);
          }
        })
        .catch(function(error) {});
    },
    getDict() {
      this.$http
        .get(`/game/v3/transferDictList`)
        .then(res => {
          if (res.code == 200) {
            this.dict = res.result;
          } else {
          }
        })
        .catch(function(error) {});
    },
    resetData() {
      this.current = 1;
      this.homeList = [];
      this.$refs.infiniteLoading.$emit("$InfiniteLoading:reset");
    },
    changeCategory(value) {
      this.serverNo = value;
      this.resetData();
    },
    changeOrder() {
      this.genAsc = !this.genAsc;
      this.resetData();
    },
    transferMonkey(id, gen) {
      var that = this;
      var server = this.serverNo == 1 ? "创世服" : "国际服";
      this.$vux.confirm.show({
        title: `确认迁移小猴吗？`,
        content: `<p>是否消耗 ${
          this.dict[gen].num
        } 个神仙草，将${server}的 #${id}号 / ${gen}代小猴至当前服务器，此操作不可逆。</p>`,
        cancelText: "取消",
        confirmText: "确定",
        onCancel() {
          that.$vux.toast.text("已取消");
        },
        onConfirm() {
          that.transferMonkeyConfirm(id);
        }
      });
    },
    transferMonkeyConfirm(id) {
      this.$http
        .post(`/game/v3/pullMyMonkey`, {
          serverId: this.serverNo,
          monkeyId: id
        })
        .then(res => {
          this.$vux.toast.text(res.msg);
          if (res.code == 200) {
            var server = this.serverNo == 1 ? "创世服" : "国际服";
            this.$vux.alert.show({
              title: "恭喜",
              content: `${server}的小猴 #${id}迁移到本服对应小猴ID为#${res.result}`,
            });
            this.resetData();
          } else {
          }
        })
        .catch(function(error) {});
    }
  }
};
</script>

<style lang="scss" scoped>
.page {
  padding-top: 10px;
}
.transfer {
  text-align: center;
  border-bottom: 1px solid #f1f1f1;
  padding-bottom: 10px;
  span {
    font-size: 14px;
    color: $grey;
  }
}
.transfer-rules {
  padding-top: 10px;
  font-size: 12px;
  color: $gray;
  span {
    color: $red;
  }
}
.filter {
  display: flex;
  justify-content: space-between;
  white-space: nowrap; // flex-wrap: wrap;
  font-size: 12px;
  background: #fff;
  height: 40px;
  line-height: 40px;
  padding: 0 12px;
  margin: 0 8px 12px;
  border-radius: 4px;
  box-shadow: 3px 3px 10px 0px rgba(158, 158, 158, 0.4);
  overflow-x: scroll;
  overflow-y: hidden;
  &::-webkit-scrollbar {
    display: none;
  }
  ul {
    display: flex;
    align-items: center;
    li {
      cursor: pointer;
    }
  }
  .status {
    color: $grey;
    li {
      transition: all 0.3s;
    }
    li:not(:last-child) {
      margin-right: 12px;
    }
    .active {
      color: $green;
      font-size: 14px;
      border-bottom: 2px solid $green;
    }
  }
  .order {
    color: $link;
    margin-left: 20px;
    li + li {
      margin-left: 12px;
    }
    .active:after {
      content: "";
      display: inline-block;
      vertical-align: middle;
      margin-top: -2px;
      width: 12px;
      height: 12px;
      background: url()
        no-repeat 50%;
      background-size: cover;
    }
    .active.up:after {
      transform: rotate(-180deg);
    }
  }
}
.list-item {
  position: relative;
  display: flex;
  height: 80px;
  overflow: hidden;
  .img {
    width: 80px;
    height: 80px;
    font-weight: 300;
    margin-right: 10px;
    position: relative;
    flex-shrink: 0;
    font-size: 10px;
    border-radius: 4px;
    overflow: hidden;
    @media only screen and (min-width: 375px) {
      font-size: 10px;
    }
    @media only screen and (min-width: 414px) {
      font-size: 12px;
    }
    @media only screen and (min-width: 768px) {
      font-size: 14px;
    }
    .id {
      position: absolute;
      color: $grey;
      background-color: rgba(255, 255, 255, 0.8);
      left: 0;
      top: 6px;
      padding: 0 5px 0 0;
      border-radius: 0 100px 100px 0;
    }
    img {
      width: 100%;
    }
  }
  .minfo {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    font-size: 14px;
    color: $grey;
    white-space: nowrap;
    li:first-child {
      color: #000;
    }
    span {
      vertical-align: middle;
    }
  }
}
</style>
